<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>虚拟机列表</title>
		<link rel="stylesheet" href="../../css/index.css" />
		<link rel="stylesheet" href="../../js/plugins/pagination/default-style/css/pagination.css">
		<link rel="stylesheet" href="../../js/plugins/pagination/default-style/css/pagination.extend.css">
		<link rel="stylesheet" href="../../js/plugins/jeDate/css/jedate.css">
	</head>
	<body>
		<!--虚拟机列表内容-->
		<div class="virtual-page page-bg">
			<div class="search-panel b-r-0">
				<!--搜索区域内容-->
				<div class="search-box pos-re">
					<div class="search-show">
						<div class="input-box">
							<input class="import-box w-128 pr-30" type="text" placeholder="用户名" />
							<a class="search-down up"><i class="search-down-icon com_icon"></i></a>
						</div>
						<div class="input-box">
							<input class="import-box" type="text" placeholder="IP" />
						</div>
						<a class="show-more-search search_icon"></a>
						<a class="search-btn search_icon"></a>
						<a class="search-back-btn search_icon"></a>
					</div>
					<!--跟多搜索条件-->
					<div class="more-search">
						<div class="more-search-box">
							<div class="more-input">
								<label class="label-text">虚拟机名称</label>
								<input class="import-box w-328" type="text" placeholder="虚拟机名称" />
							</div>
							<div class="more-input">
								<label class="label-text">创建日期范围</label>
								<div class="time-panel">
									<div class="input-box">
										<input class="start-time time-box import-box pr-30" type="text" placeholder="开始时间" />
										<a class="search-down up"><i class="time-icon select_icon"></i></a>
									</div>
									<i class="time-cut"></i>
									<div class="input-box">
										<input class="end-time time-box import-box pr-30" type="text" placeholder="结束时间" />
										<a class="search-down up"><i class="time-icon select_icon"></i></a>
									</div>
								</div>
							</div>
							<a class="accurate-search tc_btn"><i class="search-btn search_icon"></i>搜索</a>
						</div>
					</div>
					<a id="createVirtual" class="create-virtual tc_btn"><i class="add-icon select_icon"></i>创建虚拟机</a>
				</div>
				<!--批量操作按钮-->
				<div class="batch-handle d-n">
					<ul>
						<li class="btn-item">
							<a class="start-btn tc_btn"><span class="start-icon icon_20"></span>开机</a>
						</li>
						<li class="btn-item">
							<a class="shut-btn tc_btn"><span class="shut-icon icon_20"></span>关机</a>
						</li>
						<li class="btn-item">
							<a class="restart-btn tc_btn"><span class="restart-icon icon_20"></span>重启</a>
						</li>
						<li class="btn-item">
							<a class="del-btn tc_btn"><span class="delete-icon icon_20"></span>删除虚拟机</a>
						</li>
					</ul>
					<a class="close-batch-handle com_icon"></a>
				</div>
			</div>
			<!--虚拟机列表-->
			<div class="table">
				<ul class="ul_head">
					<li style="width: 3%; border:none;">
						<a id="checkAll" class="check-all select_icon mt-8"></a>
					</li>
					<li style="width: 5%">用户名</li>
					<li style="width: 8%">所属服务器</li>
					<li style="width: 8%">虚拟机名称</li>
					<li style="width: 8%">镜像/快照</li>
					<li style="width: 10%">外网IP</li>
					<li style="width: 10%">内网IP</li>
					<li style="width: 11%">创建时间</li>
					<li style="width: 8%">
						<div class="state-panel select_panel">
							<div class="select_normal">
								状态
								<a class="state-search search-down"><i class="search-down-icon com_icon"></i></a>
							</div>
							<ul class="state-select select_content">
								<li class="select_option active" sid="1">全部</li>
								<li class="select_option" sid="2">运行中</li>
								<li class="select_option" sid="3">已关机</li>
								<li class="select_option" sid="4">错误</li>
							</ul>
						</div>
					</li>
					<li style="width: 8%">任务</li>
					<li style="width: 20%">操作</li>
				</ul>
				<ul class="ul_body">
					<li class="li_tr">
						<ul>
							<li class="ul_body_td" style="width: 3%; border:none;">
								<p class="td_content">
									<a class="check-radio check-all select_icon"></a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 5%">
								<p class="td_content">
									<a class="user-name">troila</a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">server10</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">研发专用</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">Windows XP</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 11%">
								<p class="td_content t-out">2016-12-25&nbsp;8:21:20</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content"><span class="state-on state_sign">运行中</span></p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">——</p>
							</li>
							<li class="ul_body_td" style="width: 19%">
								<div class="handle-select select_panel">
									<div class="select_normal">
										<a class="virtual-on td_btn">登录</a>
										<a class="create-snapshot td_btn">创建快照</a>
										<a class="show-more-handle"><i class="search-down-icon com_icon"></i></a>
									</div>
									<div class="more-handle">
										<a class="set-ip td_btn">分配IP</a>
										<a class="release-ip td_btn">释放IP</a>
									</div>
								</div>
							</li>
						</ul>
					</li>
					<li class="li_tr">
						<ul>
							<li class="ul_body_td" style="width: 3%; border:none;">
								<p class="td_content">
									<a class="check-radio check-all select_icon"></a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 5%">
								<p class="td_content">
									<a class="user-name">troila</a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">server10</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">研发专用</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">Windows XP</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 11%">
								<p class="td_content t-out">2016-12-25&nbsp;8:21:20</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content"><span class="state-off state_sign">已关机</span></p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">——</p>
							</li>
							<li class="ul_body_td" style="width: 19%">
								<div class="handle-select select_panel">
									<div class="select_normal">
										<a class="td_btn">登录</a>
										<a class="td_btn">创建快照</a>
										<a class="show-more-handle"><i class="search-down-icon com_icon"></i></a>
									</div>
									<div class="more-handle">
										<a class="td_btn">分配IP</a>
										<a class="td_btn">释放IP</a>
									</div>
								</div>
							</li>
						</ul>
					</li>
					<li class="li_tr">
						<ul>
							<li class="ul_body_td" style="width: 3%; border:none;">
								<p class="td_content">
									<a class="check-radio check-all select_icon"></a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 5%">
								<p class="td_content">
									<a class="user-name">troila virtulajiushihsihi</a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">server10</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">研发专用</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">Windows XP</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 11%">
								<p class="td_content t-out">2016-12-25&nbsp;8:21:20</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content"><span class="state-error state_sign">错误</span></p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">——</p>
							</li>
							<li class="ul_body_td" style="width: 19%">
								<div class="handle-select select_panel">
									<div class="select_normal">
										<a class="td_btn">登录</a>
										<a class="td_btn">创建快照</a>
										<a class="show-more-handle"><i class="search-down-icon com_icon"></i></a>
									</div>
									<div class="more-handle">
										<a class="td_btn">分配IP</a>
										<a class="td_btn">释放IP</a>
									</div>
								</div>
							</li>
						</ul>
					</li>
					<li class="li_tr">
						<ul>
							<li class="ul_body_td" style="width: 3%; border:none;">
								<p class="td_content">
									<a class="check-radio check-all select_icon"></a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 5%">
								<p class="td_content">
									<a class="user-name">troila virtulajiushihsihi</a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">server10</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">研发专用</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">Windows XP</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 11%">
								<p class="td_content t-out">2016-12-25&nbsp;8:21:20</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content"><span class="state-error state_sign">错误</span></p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">——</p>
							</li>
							<li class="ul_body_td" style="width: 19%">
								<div class="handle-select select_panel">
									<div class="select_normal">
										<a class="td_btn">登录</a>
										<a class="td_btn">创建快照</a>
										<a class="show-more-handle"><i class="search-down-icon com_icon"></i></a>
									</div>
									<div class="more-handle">
										<a class="td_btn">分配IP</a>
										<a class="td_btn">释放IP</a>
									</div>
								</div>
							</li>
						</ul>
					</li>
					<li class="li_tr">
						<ul>
							<li class="ul_body_td" style="width: 3%; border:none;">
								<p class="td_content">
									<a class="check-radio check-all select_icon"></a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 5%">
								<p class="td_content">
									<a class="user-name">troila virtulajiushihsihi</a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">server10</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">研发专用</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">Windows XP</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 11%">
								<p class="td_content t-out">2016-12-25&nbsp;8:21:20</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content"><span class="state-error state_sign">错误</span></p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">——</p>
							</li>
							<li class="ul_body_td" style="width: 19%">
								<div class="handle-select select_panel">
									<div class="select_normal">
										<a class="td_btn">登录</a>
										<a class="td_btn">创建快照</a>
										<a class="show-more-handle"><i class="search-down-icon com_icon"></i></a>
									</div>
									<div class="more-handle">
										<a class="td_btn">分配IP</a>
										<a class="td_btn">释放IP</a>
									</div>
								</div>
							</li>
						</ul>
					</li>
					<li class="li_tr">
						<ul>
							<li class="ul_body_td" style="width: 3%; border:none;">
								<p class="td_content">
									<a class="check-radio check-all select_icon"></a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 5%">
								<p class="td_content">
									<a class="user-name">troila virtulajiushihsihi</a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">server10</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">研发专用</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">Windows XP</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 11%">
								<p class="td_content t-out">2016-12-25&nbsp;8:21:20</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content"><span class="state-error state_sign">错误</span></p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">——</p>
							</li>
							<li class="ul_body_td" style="width: 19%">
								<div class="handle-select select_panel">
									<div class="select_normal">
										<a class="td_btn">登录</a>
										<a class="td_btn">创建快照</a>
										<a class="show-more-handle"><i class="search-down-icon com_icon"></i></a>
									</div>
									<div class="more-handle">
										<a class="td_btn">分配IP</a>
										<a class="td_btn">释放IP</a>
									</div>
								</div>
							</li>
						</ul>
					</li>
					<li class="li_tr">
						<ul>
							<li class="ul_body_td" style="width: 3%; border:none;">
								<p class="td_content">
									<a class="check-radio check-all select_icon"></a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 5%">
								<p class="td_content">
									<a class="user-name">troila virtulajiushihsihi</a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">server10</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">研发专用</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">Windows XP</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 11%">
								<p class="td_content t-out">2016-12-25&nbsp;8:21:20</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content"><span class="state-error state_sign">错误</span></p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">——</p>
							</li>
							<li class="ul_body_td" style="width: 19%">
								<div class="handle-select select_panel">
									<div class="select_normal">
										<a class="td_btn">登录</a>
										<a class="td_btn">创建快照</a>
										<a class="show-more-handle"><i class="search-down-icon com_icon"></i></a>
									</div>
									<div class="more-handle">
										<a class="td_btn">分配IP</a>
										<a class="td_btn">释放IP</a>
									</div>
								</div>
							</li>
						</ul>
					</li>
					<li class="li_tr">
						<ul>
							<li class="ul_body_td" style="width: 3%; border:none;">
								<p class="td_content">
									<a class="check-radio check-all select_icon"></a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 5%">
								<p class="td_content">
									<a class="user-name">troila virtulajiushihsihi</a>
								</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">server10</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">研发专用</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">Windows XP</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 10%">
								<p class="td_content">172.27.108.212</p>
							</li>
							<li class="ul_body_td" style="width: 11%">
								<p class="td_content t-out">2016-12-25&nbsp;8:21:20</p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content"><span class="state-error state_sign">错误</span></p>
							</li>
							<li class="ul_body_td" style="width: 8%">
								<p class="td_content">——</p>
							</li>
							<li class="ul_body_td" style="width: 19%">
								<div class="handle-select select_panel">
									<div class="select_normal">
										<a class="td_btn">登录</a>
										<a class="td_btn">创建快照</a>
										<a class="show-more-handle"><i class="search-down-icon com_icon"></i></a>
									</div>
									<div class="more-handle">
										<a class="td_btn">分配IP</a>
										<a class="td_btn">释放IP</a>
									</div>
								</div>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<!--底部分页-->
			<div class="table-footer">
				<!--设置每页显示条数-->
				<div class="change-record">
					<label class="foot-label">每页显示</label>
					<div class="record-select">
						<p class="now-record"><span>10</span><i class="show-record-ul com_icon"></i></p>
						<ul class="record-ul d-n">
							<li class="record-item">10</li>
							<li class="record-item">20</li>
						</ul>
						<span class="record-unit">条</span>
						<div class="checked-count">，选中<span id="checkedCount" class="count-num color0099ff">0</span>条</div>
					</div>
				</div>
				<div class="pagination-panel">
					<div id="pagination" class="f-l"></div>
					
					<div class="page-extend f-l">
						<div class="jump-page">
							<label class="jump-title mr-5">跳转到</label>
							<div class="jump-num d-ib">
								<input id="jumpNum" type="text" class="jump-text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
								<a id="jumpBtn" class="jump-btn">GO</a>
							</div>
							<div class="page-count d-ib ml-10 color6f87ab">共<span id="pageCount" class="count-num color0099ff">50</span>条数据</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/libs/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="../../js/libs/jquery-ui/jquery.ui.core.min.js" type="text/javascript"></script>
	<script src="../../js/plugins/niceScroll/js/jquery.nicescroll.js" type="text/javascript"></script>
	<script src="../../js/plugins/pagination/default-style/js/jquery.pagination.js" type="text/javascript"></script>
	<script src="../../js/plugins/pagination/default-style/js/jquery.pagination.extend.js" type="text/javascript"></script>
	<script src="../../js/plugins/jeDate/js/jedate.js" type="text/javascript"></script>
	<script src="../../js/view/virtualManage/virtualList.js" type="text/javascript"></script>

</html>